<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>车队管理界面</title>
    <link rel="stylesheet" href="css/goods.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        body {
            background-color: #f8f9fa;
        }

        .container {
            margin-top: 20px;
        }

        .navbar {
            background-color: #343a40;
            color: #f8f9fa;
        }

        .navbar-brand {
            color: #f8f9fa;
        }

        .row {
            margin-bottom: 20px;
        }

        .col-2,
        .col-10 {
            padding: 20px;
        }

        .sidebar {
            background-color: #495057;
            color: #f8f9fa;
            min-height: 400px;
        }

        .sidebar ul {
            list-style-type: none;
            padding-left: 0;
        }

        .sidebar li a {
            color: #f8f9fa;
            text-decoration: none;
        }

        .main-content {
            background-color: #f8f9fa;
        }

        table {
            background-color: #f8f9fa;
        }

        .footer {
            background-color: #5b5b5b;
            color: #f8f9fa;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-dark">
        <div class="col-2"><img src="img/market.jpg" width="100%" alt=""></div>
        <div class="col-8 text-center"><p>欢迎使用自行车队管理系统</p></div>
        <div class="col-2">
            <span>当前用户:</span>
            <span th:text="${username}"></span>
            <!--            <button class="btn btn-info">退出</button>-->
            <span><a href="/logout">退出</a> </span>
        </div>
    </nav>
    <div class="row">
        <div class="col-2 sidebar">
            <ul>
                <li class="m-2">
                    <a href="/main">管理系统首页</a>
                </li>
                <li class="m-2">
                    <a href="/goods">车队管理</a>
                </li>
            </ul>
        </div>
        <div class="col-10 main-content">
            <div class="row text-center">
                <div class="col-9"></div>
                <div class="col-3"><a href="/goodsAdd" class="btn btn-warning">新增</a></div>
            </div>
            <table class="table table-bordered">
                <thead>
                <th>编号</th>
                <th>姓名</th>
                <th>队员价值</th>
                <th>奖牌数量</th>
                <th>位置</th>
                <th>管理</th>
                </thead>
                <tbody>
                <tr th:each="goods:${data}">
                    <td th:text="${goods.id}"></td>
                    <td th:text="${goods.name}"></td>
                    <td th:text="${goods.price}"></td>
                    <td th:text="${goods.quantity}"></td>
                    <td th:text="${goods.supplier}"></td>
                    <td>
                        <button class="btn btn-danger"  th:onclick="del([[${goods.getId()}]])">删除</button>
                        <button class="btn btn-info"  th:onclick="update([[${goods.getId()}]])">更新</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row text-center footer">
        @2023-2028,版本所有，违者必究
    </div>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>
    function del(id){
        var flag = confirm("是否删除这条记录？");
        if(flag==true){
            $.post("/api/goodsDelete",{"id":id},function(res){
                console.log(res)
                if(res==1){
                    alert("删除成功！");
                    location.reload();
                }else{
                    alert("删除失败!");
                }
            })
        }
    }
    //     更新
    function  update(id){
        // 确认是否更新
        var flag = confirm("是否更新这条记录？");
        if(flag==true){
            //     确认更新
            location.href="/goodsUpdate?id="+id;
        }
    }
</script>
